<template>
    <div>

        <el-card style="margin-bottom: 20px;width: 100%;height: 21vh">
            <span style="font-weight: bold;font-size: 18px">基本信息</span>
            <el-row :gutter="100" style="margin: 20px 0">
                <el-col :span="7" style="margin-left: 100px">
                    <div @click="toProduct">
                        <el-card shadow="hover"
                                 style="background: linear-gradient(45deg, #ffaaaa, #ff7474);width: 100%;height: 9.8vh">
                            <div style="display: flex">
                                <div class="size-icon" style="flex: 1;margin-top: 5px"><i class="el-icon-s-goods"
                                                                                          style="display: flex;justify-content: center;"></i>
                                </div>
                                <div style="flex: 3;display: flex;flex-direction: column">
                                    <div style="text-align: center;color: white;font-family: 方正姚体;font-size: 20px">
                                        {{ productTotal }}
                                    </div>
                                    <div style="text-align: center;color: white;font-family: 方正姚体">商品数量</div>
                                </div>
                            </div>
                        </el-card>
                    </div>

                </el-col>

                <el-col :span="7">
                    <div @click="toOrders">
                        <el-card shadow="hover"
                                 style="background: linear-gradient(45deg, #ffccaa, #ffad76);width: 100%;height: 9.8vh">
                            <div style="display: flex">
                                <div class="size-icon" style="flex: 1;margin-top: 5px"><i class="el-icon-s-data"
                                                                                          style="display: flex;justify-content: center;"></i>
                                </div>
                                <div style="flex: 3;display: flex;flex-direction: column">
                                    <div style="text-align: center;color: white;font-family: 方正姚体;font-size: 20px">
                                        {{ orderTotal }}
                                    </div>
                                    <div style="text-align: center;color: white;font-family: 方正姚体">订单数量</div>
                                </div>
                            </div>
                        </el-card>
                    </div>

                </el-col>


                <el-col :span="7">
                    <div @click="toPurse">
                        <el-card shadow="hover"
                                 style="background: linear-gradient(45deg, #409eff, #8dbbeb);width: 100%;height: 9.8vh">
                            <div style="display: flex">
                                <div class="size-icon" style="flex: 1;margin-top: 5px"><i class="el-icon-money"
                                                                                          style="display: flex;justify-content: center;"></i>
                                </div>
                                <div style="flex: 3;display: flex;flex-direction: column">
                                    <div style="text-align: center;color: white;font-family: 方正姚体;font-size: 20px">
                                        ￥ {{ account.surplus }} 元
                                    </div>
                                    <div style="text-align: center;color: white;font-family: 方正姚体">钱包余额</div>
                                </div>
                            </div>
                        </el-card>
                    </div>

                </el-col>


            </el-row>
        </el-card>


        <el-row :gutter="20">
            <el-col :span="12">
                <el-card>
                    <div id="line" style="width: 100%;height: 350px"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="height:185px">
                    <!--                    <div id="bar" style="width: 100%;height: 350px"></div>-->
                    <span style="font-weight: bold;font-size: 18px;">今日概括</span>
                    <div style="margin-top: 20px">


                        <el-row :gutter="50">
                            <el-col :span="12" style="">
                                <el-card style=" height: 100px">
                                    <div>今日订单数量</div>
                                    <div style="font-size: 20px;margin-top: 10px; color:  #ff0024">
                                        {{ this.orderCount ? this.orderCount : 0 }}
                                    </div>
                                </el-card>
                            </el-col>

                            <el-col :span="12" style="">
                                <el-card style=" height: 100px">
                                    <div>今日上架数量</div>
                                    <div style="font-size: 20px;margin-top: 10px; color:  #ff0024">
                                        {{ this.productCount ? this.productCount : 0 }}
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>


                <el-card style="height:185px;margin-top: 20px">
                    <!--                    <div id="bar" style="width: 100%;height: 350px"></div>-->
                    <span style="font-weight: bold;font-size: 18px;">整体概括</span>
                    <div style="margin-top: 20px">

                        <el-row :gutter="50">
                            <el-col :span="12" style="">
                                <el-card style=" height: 100px">
                                    <div>总商品销量</div>
                                    <div style="font-size: 20px;margin-top: 10px; color:  #ff0024">
                                        {{ this.sales ? this.sales : 0 }}
                                    </div>
                                </el-card>
                            </el-col>

                            <el-col :span="12" style="">
                                <el-card style=" height: 100px">
                                    <div>总销售额</div>
                                    <div style="font-size: 20px;margin-top: 10px; color:  #ff0024">
                                        {{ this.transactions ? this.transactions : 0 }}
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>


                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="24">
                <el-card>
                    <div id="product" style="width: 100%;height: 350px"></div>
                </el-card>
            </el-col>

        </el-row>


    </div>
</template>


<script>


import {defineComponent} from 'vue'
import * as echarts from "echarts"; // 折线图参数

// 折线图参数
const lineOption = {
    // 标题
    title: {
        text: '订单详情统计图',
        left: 'right' // 标题位置
    },
    // 提示框
    tooltip: {
        trigger: 'axis'
    },
    // 图例
    legend: {
        // orient: 'vertical', // 图例方向
        left: 'left' // 图例位置
    },
    // 工具箱
    // X轴
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    // Y轴
    yAxis: {
        type: 'value'
    },
    // 数据
    series: [
        {
            name: '订单金额',
            data: [],
            type: 'line',
            smooth: true
        },
        {
            name: '订单数量',
            data: [],
            type: 'line',
            smooth: true
        },
        {
            name: '购买人数',
            data: [],
            type: 'line',
            smooth: true
        }
    ]
};

// 折线图参数
const productOption = {
    // 标题
    title: {
        text: '热门商品TOP20',
        left: 'left' // 标题位置
    },
    // 提示框
    tooltip: {
        trigger: 'axis'
    },
    // 图例
    legend: {
        // orient: 'vertical', // 图例方向
        left: 'right' // 图例位置
    },
    // 工具箱
    // X轴
    xAxis: {
        type: 'category',
        data: []
    },
    // Y轴
    yAxis: {
        type: 'value'
    },
    // 数据
    series: [
        {
            name: '商品的销量',
            data: [],
            type: 'line',
            smooth: true
        },
        {
            name: '商品的点击量',
            data: [],
            type: 'line',
            smooth: true
        },
        {
            name: '商品的收藏量',
            data: [],
            type: 'line',
            smooth: true
        }
    ]
};

export default defineComponent({
    name: "Data",
    data() {
        return {
            account: {},            // 当前用户信息
            storeId: '',     // 商家Id
            productTotal: 0,    // 商品数量
            orderTotal: 0,    //  订单数量
            stores: [],           // 商家TOP10

            transactions: '',
            sales: '',
            orderCount: '',
            productCount: '',
        }
    },

    mounted() {

        // 获取商家信息
        this.account = JSON.parse(localStorage.getItem("account"));
        this.storeId = this.account.id;

        // 如果用户不存在 则跳转登录
        if (!this.account.id) {
            this.$router.push('/login')
        }


        this.$request.post('/product/getStoreTotal' + '?id=' + this.storeId).then(res => {
            if (res.code === '200') {
                this.productTotal = res.data;
            }
        })

        this.$request.post('/orders/getStoreTotal' + '?id=' + this.storeId).then(res => {
            if (res.code === '200') {
                this.orderTotal = res.data;
            }
        })

        this.getTodayInfo()
        this.loadLineCharts()
        this.loadProductCharts()

        // this.loadBarCharts()
    },

    methods: {

        toPurse() {
            this.$router.push('/store/purse')
        },

        getTodayInfo() {
            this.$request.post('/store/getTodayInfo' + '?id=' + this.storeId).then(res => {

                console.log(res)
                if (res.code === '200') {
                    this.transactions = res.data[3];
                    this.sales = res.data[2];
                    this.orderCount = res.data[0];
                    this.productCount = res.data[1];
                } else {
                    this.$message.error(res.msg);
                }

            })
        },

        toProduct() {
            this.$router.push('/store/product')
        },
        toOrders() {
            this.$router.push('/store/orders')
        },

        loadLineCharts() {
            // 初始化 折线图
            // 获取id为line的DOM元素
            let lineDom = document.getElementById('line');
            // 初始化echarts实例
            let lineChart = echarts.init(lineDom);
            // 设置图表配置项
            this.$request.get('/store/lineCharts' + '?id=' + this.storeId).then(res => {
                if (res.code === '200') {
                    lineOption.xAxis.data = res.data?.map(v => v.date) || []
                    lineOption.series[0].data = res.data?.map(v => v.price) || []
                    lineOption.series[1].data = res.data?.map(v => v.count) || []
                    lineOption.series[2].data = res.data?.map(v => v.userCount) || []
                    lineChart.setOption(lineOption)
                }
            })
        },

        //  加载商品TOP20
        loadProductCharts() {
            // 初始化 折线图
            // 获取id为line的DOM元素
            let productDom = document.getElementById('product');
            // 初始化echarts实例
            let productChart = echarts.init(productDom);
            // 设置图表配置项
            this.$request.get('/store/productCharts' + '?id=' + this.storeId).then(res => {
                // console.log(res)
                if (res.code === '200') {
                    productOption.xAxis.data = res.data?.map(item => item.productName) || [];
                    productOption.series[0].data = res.data?.map(item => item.sales) || [];
                    productOption.series[1].data = res.data?.map(item => item.views) || [];
                    productOption.series[2].data = res.data?.map(item => item.favoriteCount) || [];
                    productChart.setOption(productOption)
                }
            })
        },

        // 加载柱状图
        loadBarCharts() {
            // 初始化 柱状图
            // 获取id为line的DOM元素
            let barDom = document.getElementById('bar');
            // 初始化echarts实例
            let barChart = echarts.init(barDom);
            // 设置图表配置项
            // barChart.setOption(barOption);

            this.$request.get('/barCharts').then(res => {
                // console.log(res)
                if (res.code === '200') {
                    // 柱状图
                    barOption.xAxis.data = res.data?.map(v => v.name) || []
                    barOption.series[0].data = res.data?.map(v => v.productCount) || []
                    barOption.series[1].data = res.data?.map(v => v.orderCount) || []
                    barChart.setOption(barOption)
                }
            })
        },


    }
})
</script>


<style>
.size-icon {
    font-size: 35px;
    color: white;
}

</style>